<template>
  <div class="login">
   <el-card class="box-card">
     <el-tabs v-model="curentindex" stretch  @tab-click="handleTabsClick">
     <!-- 登录 -->
     <el-tab-pane label="登录" name="login">
       <el-form :model="loginForm" :rules="rules" status-icon ref="loginForm">
      <el-form-item label="用户名" prop="username"  label-width="75px">
        <el-input type="text" v-model="loginForm.username"></el-input>
      </el-form-item>

       <el-form-item label="密码" prop="password" label-width="75px">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>

       <el-form-item>
       <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>

       </el-form>
     </el-tab-pane>

     <!-- 注册 -->
     <el-tab-pane label="注册" name="register">
        <el-form :model="registerForm" :rules="rules" status-icon ref="registerForm">
      <el-form-item label="用户名" prop="username"  label-width="75px">
        <el-input type="text" v-model="registerForm.username"></el-input>
      </el-form-item>

       <el-form-item label="密码" prop="password" label-width="75px">
        <el-input type="password" v-model="registerForm.password"></el-input>
      </el-form-item>

       <el-form-item label="确认密码" prop="configpassword" label-width="75px">
        <el-input type="password" v-model="registerForm.configpassword"></el-input>
      </el-form-item>

       <el-form-item>
       <el-button type="primary" @click="submitForm('registerForm')">登录</el-button>
      </el-form-item>

       </el-form>
     </el-tab-pane>

     </el-tabs>
   </el-card>
  </div>
</template>
<script>
export default {
    data(){
      // 验证规则
      let usernamerules = (rule, value, callback)=>{
        if(!value){
          return callback(new Error('用户名不能为空'));
        }
        else if(value.length < 6){
          return callback(new Error('用户名长度不能为小于六位'));
        }
        else{
          callback()
        }
      }

      let passrules = (rule, value, callback)=>{
        if(value === ''){
          return callback(new Error('请输入密码'));
        }else{
          callback()
        }
      }

      let configpassrules = (rule, value, callback) =>{
          if(value === ''){
          return callback(new Error('请输入密码'));
        }
        else if(value !== this.registerForm.password){
          return callback(new Error('两次输入密码不一致'));
        }
        
        else{
          callback()
        }
      }


      return{
        activeTab:'login',
        curentindex:'login',
        loginForm:{
          username:'',
          password:''
        },
        registerForm:{
          username:'',
          password:'',
          configpassword:''
        },
        rules:{
          username:[ { validator: usernamerules, trigger: 'blur' }],
          password:[{ validator: passrules, trigger: 'blur' }],
          configpassword:[{ validator: configpassrules, trigger: 'blur' }]
        }
      }
    },
    methods:{
      submitForm(formName){
        this.$refs[formName].validate((valid)=>{
          if(valid){
            if(this.activeTab === 'login'){
              // 登录
                console.log(this.loginForm);
            }

            if(this.activeTab==='register'){
              // 注册
               console.log(this.registerForm);
            }
           
          }else{
            return
          }
        })
      },
      handleTabsClick(tab){
        // console.log(tab.name);
        this.activeTab = tab.name
      }
    }
}
</script>
<style scoped lang="less">
  .login{
     width: 1200px;
     margin: 0 auto;

    .box-card{
     width: 500px;
     margin: 100px auto;
     }
  }
</style>